<template>
  <div class="cascader">
    <el-cascader
      :props="props"
      size="large"
      clearable
      @change="change"
      @blur="blur"
      ref="cascader"
      placeholder="请选择分类"
      v-model="value"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  name: "Cascader",
  data() {
    return {
      value: [],
      props: {
        value: "id",
        checkStrictly: true,
        lazy: true,
        // emitPath: false,
        lazyLoad: async (node, resolve) => {
          if (!node.data?.childrens.length > 0) {
            await this.axios.get("/api/v1/category").then((res) => {
              const nodes = Array.from(res.data).map((item) => ({
                value: item.value,
                label: item.label,
                id: item._id,
                childrens: item.children,
                leaf: item.children.length < 1,
                level: item.deep,
              }));
              resolve(nodes);
            });
          } else {
            await this.axios
              .get("/api/v1/category/" + node.data?.id)
              .then((res) => {
                const nodes = res.data.map((item) => {
                  return {
                    value: item.value,
                    label: item.label,
                    id: item._id,
                    childrens: item.children,
                    leaf: item.children.length < 1,
                    level: item.deep,
                  };
                });
                resolve(nodes);
              });
          }
        },
      },
    };
  },

  methods: {
    change(ss) {
      this.$emit("query", ss);
      this.$refs.cascader.dropDownVisible = false;
    },
    blur() {},
  },
  created() {
    // console.log(this);
    this.value = this.$attrs?.value;
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.cascader {
  width: 100%;
}
.el-cascader {
  width: 100%;
}
</style>